My project is to develop a bicyclist navigation app for phones or smart watches that will help bicyclists safely navigate along a custom-made bike route. The app will help provide directions and alert them if there are any changes, such as traffic, news alerts weather notifications and provide certain service stops along that route.

Bicyclists need to navigate safely to their destination by giving them accurate real time updates to their route and surrounding areas as they travel. The app should make travel safe and efficient. The app will also give them a better experience through sightseeing recommendations (as an option).

The goal of this project is to provide bicyclists with navigation assistance while they are riding their bikes along a route. It had to be a free app; this way people from low income backgrounds could afford to at least give it a try. While they are traveling, the app should give them all they need to know about their route and service stops and sightseeing destinations to give not only good timing on their route but also give them a great bike riding experience.  Here I will show you the process in which I built my app.

The Vision I had for this app was that it could work across multiple devices, either the phone or a wristwatch device. This way the bicyclist can have on-the-go navigation they can freely access when they are traveling. Preferably, it will give them the quickest but safest route possible. It would also accurately alert cyclists when they need to change course to follow directions to destination.

The graph below lists the way in which I would do my design process for the app.

Research for this project included a competitive audit of my competitors who were doing similar things to my app. I compared each of the competitor’s pros/cons and what users said about them in reviews. This Market Analysis Data would be to get me familiar with the existing bicyclist navigation apps. Looking at the reviews for these competitors would prove vital for me to understand their app's UI, UX, User flow, and key features to identify the common problems they have that I would address with my app.

Most of the bike navigation apps I looked at received this feedback. First, that being able to customize the interface and having the freedom to choose their routes without having to pay for them was a good thing. What was also helpful to users was having a simple yet accurate map on which to track their bike trip progress. Some users also would like if there was a place to save their routes for next time. Finally, the users of these apps were looking for the quickest, safest, route they need for their biking trips. All of these apps were effective on mobile phones. Below are each of the result pages from that Competitive Audit.

The group I interviewed were two veteran bicyclists who had been biking for years. They have either done it solo or with a group. They are mostly into recreational bicycling but have done biking when it came to work related commutes though only if they lived nearby. They are part of the Bicyclists of the West Coast demographic. They are very careful in studying their route before and packing all the essentials they need to travel safely. This is how they are very aware of the environment given that it is vital for traveling. They love the outdoors especially. The user group is ethically and socially diverse.

1. Can you describe your favorite type of cycling route or trail and why it is your favorite? 

​

2. Have you bicycled for work, commute, or recreational reasons during the time you rode        your bicycle. Could you describe it?

​

3. What do you enjoy most about bicycling?

​

4. What are some of your favorite stops on cycling routes you take?  For example, food          service or maintenance stops if you need one. How do you navigate to them on your          route?

​

5. How do you navigate when you are cycling?  Is it electronic? If so, what have you tried. 

​

6. What would your ideal form of navigation assistance be?

​

7. What time of day would you prefer to ride your bicycle?

​

8. How do you ensure your safety while cycling, especially on busy roads? 

​

9. While bicycling, what would be the least distracting: a visual or audio alert if you need to have an urgent update about something while bicycling from your phone.

​

10. How do you handle different weather conditions when cycling?

​

11. Do you have any favorite cycling accessories or gear that you can’t do without? How do you manage them while riding?

​

12. Have you ever had any memorable or challenging experiences while cycling? Can you share one?

The research I did on my West Coast bicyclists demographic was the result of doing two interviews with individuals who had done their share of bike riding over the years. I learned what they had done and what they like when bicycling. Based on my interviews, bicyclists prefer to travel on quieter routes away from cars if possible. They have done bicycling for both work-related commutes and for recreation, most of the time for recreation and exercise. Most bicyclists have prepared food and meals for travel beforehand so they don’t need food stops that much though, it would be a good idea to know just in case. For other destinations such as sightseeing, bicyclists have prepared maps in the past though in recent years, they have used their phone more for looking at the map online. Most of the time, they travel on familiar trails that they have studied beforehand. They especially would prefer traveling during daylight hours and in good weather that they check before their outings. They make sure that they are well prepared with reflective clothing and with a helmet. From what I have found out, they would find subtle audio cues from electronics or vibrations to be less distracting. They overall want to be prepared for their travels and have their most important gear, especially electronic navigation devices, be in easy to access areas on them such as their pockets or on their wrists in the case of watch like devices.

After doing research on what I would want for designing my app, I would make it based on the following design criteria both contextual and functional. Below is what I came up for those and the idea app features list I had planned for the app at the beginning of development.

Primary users should be able to access this app through their phone or watch while riding a bike. They will use this to plan out a route to a selected destination with any food stops, bike maintenance, or special sightseeing landmark locations (for example parks) included. They then could go in reverse when they get to their final destination or go a different route that they plan.

The app needs to be easy to navigate and simple to use. It needs to be able to accommodate those of different viewing needs. The navigation maps used for the biking routes need to be accurate. The maps need to be updated in real time and be able to make accurate changes in routes if an unexpected occurrence happens. Most importantly the navigation alert system has to help the bicyclist without distracting them.

1. Setting destination feature 

​

2. Real time navigation map that scales.

​

3. GPS tracking system.

​

4. Device syncing with other devices.

​

5. Audio alert system with alert sound of choice.

​

6. Audio auto selected based on route location.

​

7. Mile marker system.

A West Coast Bicyclist is trying to plan a biking trip through their neighborhood and to a destination. They need to know the quickest bike safe route to their destination. They plan out the route and set their app to remind them where they should go based on the route they planned. Along the way they make a stop to get a snack at a store the app knew would be on the route. Then have to change the route due to an unexpected obstacle that blocks their path. After the West Coast Bicyclist makes it to their destination  they chart a path home using the app to go the way they successfully used to get to the outskirts of their hometown.

After interviewing and observation was completed, I developed a persona that highlights the individual group that represents my primary user base.

After the site map was developed, I reviewed the results from the interviews and determined the most important “user flow” I wanted to feature in this prototype. I decided to do how the app plans a bicycle ride route for a user. I then created some wireframes of the proposed interface.

After getting a clear picture through the user first journey, I started drawing by hand the low-Fidelity wireframes. I did these sketches in the crazy eight technique. I drew 8 sketches of each page I would do for my plan a bicycle ride route user flow.

Below are images of the sketches I did for the crazy eight phase of my app project. Red squares on the pages show what designs I would build on for the low-fidelity iteration or wireframes. Red rectangles around the thumbnails also mark which ones were chosen for use when making the wireframes. As a note, some app page design were done with two crazy eight sketch sheets made. The old and new versions of the same page are paired up back-to-back with each other. The rectangle outlines show which thumbnails were chosen for refinement and the final choice.

After I brought these sketches into class, I concluded from the feedback I received that I would set up these pages vertically. This was because I found out that most phone mounts on bikes are vertically arranged and would be easier to read for people when riding. This way I would make protypes for these pages in a vertical format as I went along with prototyping my app.

I prepared wireframes based on feedback I had received from the crazy eight sketches. I would do these wireframes in Figma which would be where I did my app project for the rest of the quarter. The user flow I would create is planning out a bike ride and following it to its conclusion.

After I completed the flow and finished the wireframes it was time to put the wireframes into a prototype and put this app through a process of ideations and feedback. I would make adjustments to the prototypes. Next, I would copy and paste the wireframes in Figma and use the copy to make improvements to the app based on feedback. The Figma files would be adjusted with different versions exported as pdfs for reference later on. The feedback I received was the following: the tutorial was to be accessible in a separate menu page that I would make by the next critique. The "load current position" screen was removed and the "current position" for a bike trip plan was to automatically be finished upon entry to said page. Another suggestion I received was the "yes" or "no" option pages concerning the direction alert settings page were to be removed and skip to the alert audio sound settings page. On the map showing the bike trip of the user in progress would have the zoom in and out buttons removed since they were considered unnecessary especially having to press multiple times when riding. Also, the directions would have to be made bigger so the user could see them more clearly. The trip map viewer would need to have start and finish markers to give users a clearer picture of where they would be going on the route. There were many adjustments to be done on the layout such as background colors on the Trip Planner screen.

For this version, I had copied the previous version within the same Figma file and modified the copy based on feedback I had received from the wireframes stage of my project. I had already in the wireframes used icons and images I had intended to use for this saved in the tutorial pages that I would complete when the app's high-fidelity version was done. This way, I would know what to type in the tutorial. With the icons I needed already there I would not have to replace much except if it was vital to improve the project. Below are two user flow tasks that were at this point part of the app: The task in which a user plans a trip and completes it while setting a "direction coming up" alert to help notify the biker that a change in direction would occur soon. The other user task was accessing the tutorial if the user was confused. They could use the hamburger menu button in the corner to access info on the app in tutorial to help them understand the app's process.

The refinements for the next version as I made my way to the high-fidelity stage would include the following: I would not have the mile limiter page automatically go to the trip setup upon entering the number of miles the user would like to have as their maximum trip. Instead, I would have them double check before pressing the confirm button. I would also have the mile limit shown in the map with the proper scale implemented in future versions. I would in the trip plan page, have the option for more than one route to their destination. This is so users could avoid busier roads if they wanted to for their ride. Another big change would have the direction alert sound settings moved to a new menu page accessible via a burger menu icon in the trip set up page. The user would already have a direction alert notification set up for them, but they would have the option to change it if they wish. Also, additional icons would be added to the maps both in the trip set up and the map viewer during the trip. I would also add icons on the map to represent certain locations for points of interest to the user. such as food stops, bike maintenance stops, and sightseeing stops. The last big change was a trip direction alert having the color scheme change from red to blue since red gave users the impression that it was an error and therefore confusing. There were also a number of color, type face, font size, and minor feature reworks that were recommended that I would implement.

For this version I had incorporated all the recommendations I had done for the previous version. I would repeat this process in addition to copying the previous version and working on the new copy. Below are three user flow tasks: the bike trip plan and navigate task and the access tutorial I had done in the previous version, and the new separated into a different task that involves syncing the user's headphone and selecting a different direction alert to use when a user's next destination is coming up. The alert sound setting could be accessed the same way as the tutorial by clicking on the hamburger menu button then selecting the corresponding page. 

The refinements I would do for the next version as I made my way to the high fidelity would include the following: The icons needed a better way to be listed, the mile limiter circle was not understandable, some users thought the return preview text was a button, there was confusion on the return trip part, however, the color change in the direction alert from red to blue was good. There was still some confusion on the a few of the buttons the way in which the user is supposed to proceed with their primary task (route planning) and how to navigate while traveling on that route. There were also some element rearrangements that had to be done in the direction alert sounds, such as moving the "sync headphones" button to the top portion. The biggest feedback I received would be in the form of doing not just my primary and secondary colors but also adding a tertiary color. I would have to do some major color modifications such as using a very light shade of blue for a few key buttons and UI such as the start and finish icons in the beginning and end destinations in the plan trip page of the app. Additionally, the scrollable map feature was to be installed by the next critique for pages with the map button. On a good note, the keys I used for the map icons were good layouts. Again, there were some minor font size and placement recommendations that were to be made.

For this version I had implemented all the recommendations I had done for the previous version. I would repeat this in addition to copying the previous version and working on the new copy. Below are three user flow tasks. The bike trip plan and navigate task and the access tutorial I had done in the previous version. The new separated into a different task that involves syncing the user headphone and selecting a different direction alert to know when the next destination is coming up. The alert sound setting could be accessed through the same hamburger menu button page as the tutorial.

The refinements I would do for the next version would include the following: Removing some text boxes from a few pages and using only text, removing the colored background from the tutorial, adding "mile" as a unit of measurement in the mile limiter page, re-wording some page titles and buttons, re-adjusting the size of the hamburger menu button icon, and adding it to more of the pages for design layout consistency. Using different colors for each icon, having full words for the icons rather than just a single letter as was the case in the start and end locations in the plan trip page, and the start and finish markers on the map. The biggest changes to be made were that the potential route to select in the "plan trip map" needed to be visibly different from one another with different color and/or different types of line (like dashed ones), the icons toggle setting needed a toggle "all on" or "off" function, the alert page needed to be removed and instead it was recommended that the alert be given visually by having the next upcoming direction section of the map viewer turn red. The keys were also transformed such as the key in the plan trip being turned into a side bar instead of a drop down.  The alert sound settings also had an icon and text sync function there with the button being pressed and a headphones icon changing to filled when the headphones are confirmed to be in sync. The tutorial was also reworked to a slide show-based page system with arrow buttons taking the user to the next step in the tutorial. However, other than these recommendations, at this point the main user flow was moving smoothly; the movable map was good according to user tests,

After doing many modifications from the mid-fidelity based on feedback from users who tested my prototypes this high fidelity prototype was the culmination of my Navi-Cycle App.

Icons and Design guidelines for the final design were developed for this project. This includes color palette and typography. Below is the final color palette and typography that was used for the Final High-Fidelity prototype.

A high-fidelity prototype was created for the intended user flow. Below is a breakdown of the plan your trip page with highlights on it’s available features.

This user flow demonstrates how the user can plan out the route for their biking trip and navigate it from start to end.

This user flows demonstrates how the user can set a direction audio alert that will trigger when they approach the next direction on their bike route.

These user flows demonstrate how the user can, in the route completed page, toggle the map icons on and off in the return route preview map on and off.

This user flows demonstrate how a user can extend the map key in the Plan Your Trip page to identify any icons on the map and what they represent.

This user flows demonstrates how a user can access information on a notable location marker in the maps by clicking on them for extended detail about that location.

This user flows demonstrates how a user can access the Navi-Cycle app tutorial from the menu options page.

Overall, a prototype demonstrating all the user flows in the Navi-Cycle app was created in Figma.

A link to the final working prototype is available to access here: Figma Prototype

Overall, I was able to do well on this project despite its challenges. I was able to get better research on the bike apps by looking at the reviews of my competition. I also got a decent amount of info from my interviews, but I wish I had a larger sample size of bicyclists. I also was able to give a clear final layout with my app once I got the recommendations I received through user tests. I was able to implement a decent movable map with icons users can click on. I was also able to implement the color schemes involving primary, secondary, and tertiary despite being new to the concept. I look forward getting more practice with these concepts. Doing the alert sound selection is, I believe, was still the most effective way to help with navigation during bike ride. I do believe it has potential as an effective navigation aid app system despite not being able to demo the direction alert system itself in the Figma prototype. I also made a good system for establishing a hard limit on how far the user wants their trip to be. This served the purpose of limiting the number of routes one has available within their mile limit, so the map is not too cluttered when planning out a user's bike trip. Finally, I believe I had found a better way to navigate the instructions pages by having multiple pages then having them all be visible on a single long page to scroll. There are some things I wish I could have implemented or done better such as a customizable UI system to accommodate people who view parts of the app UI differently or would prefer certain UI layout aspects to be in a different spot. However, I was limited from doing so in the Figma software program. I would have liked a way to display how busy some routes are in the map, but the number of colors involved need to code them would have, in my view, made the map too messy to read in the trip planner page. Lastly, I would have liked a way to simulate the zoom in "zoom out" function of a map in Figma but I was constrained from doing so because of the limits of the program. Overall, I was still able to do a good first attempt at designing a navigation aid app like Navi-cycle.